<template>
    <div class="outmain ba_f">
      <el-tabs v-model="activeName2" type="card" @tab-click="handleTabClick2">
        <el-tab-pane label="规格库" name="1"></el-tab-pane>
        <el-tab-pane label="属性库" name="2"></el-tab-pane>
        <el-tab-pane label="加料库" name="3"></el-tab-pane>
        <el-tab-pane label="单位库" name="4"></el-tab-pane>
      </el-tabs>
        <div class="shuju_title mar_b20 mar_t20">
            <div class="shuju_title_text">
                <span>商品属性</span>
            </div>
        </div>
        <div>
            <el-button type="primary" size="medium" @click="handleEdit">新增属性</el-button>
            <el-button size="medium" @click="handleDelete">批量删除</el-button>
        </div>
        <div class="tabledata mar_t20">
            <el-table
                    v-loading="listLoading"
                    :data="list"
                    :element-loading-text="elementLoadingText"
                    stripe
                    style="width: 100%"
                    @selection-change="setSelectRows">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="sort"
                        label="排序"
                >
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="ID"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="属性名称"
                >
                </el-table-column>
                <el-table-column
                        prop="attr_str"
                        label="属性值"
                >
                    <template slot-scope="scope">
                        {{scope.row.attr_str && scope.row.attr_str.map((item) => item.sxz).join('|')}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="display"
                        label="状态"
                >
                    <template slot-scope="scope">
                        <div class="">
                            <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                                       @change="changeSwitch(scope.row)"></el-switch>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <div class="flex">
                            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
            <edit ref="edit" @fetchData="fetchData"></edit>
        </div>
    </div>
</template>

<script>
    import Edit from "../../../views/good/components/gattributeedit";
    import {getAttrList, changeAttr, attrDel} from "@/api/good";
    import {mapState} from "vuex";

    export default {
        components: {Edit},
        created() {
            this.fetchData();
        },
        computed:{
          ...mapState(['storeId'])
        },
        data() {
            return {
                activeName2: '2',
                list: [],
                listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
            }
        },
        methods: {
            async fetchData() {
                const {data, count} = await getAttrList({page: this.page.currentPage,storeId:this.storeId});
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            setSelectRows(val) {
                this.selectRows = val;
            },
            handleEdit(row) {
                if (row.id) {
                    this.$refs["edit"].showEdit(row);
                } else {
                    this.$refs["edit"].showEdit();
                }
              this.$refs['edit'].setStoreId(this.storeId)
            },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await attrDel({id: row.id,storeId: this.storeId});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                } else {
                    if (this.selectRows.length > 0) {
                        const id = this.selectRows.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await attrDel({id,storeId:this.storeId});
                            this.$baseMessage(msg, "success");
                            this.fetchData();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
            handleTabClick2() {
              if (this.activeName2 == '1') {
                this.$router.push(`/storegoodspec`);
              } else if(this.activeName2=='2'){
                this.$router.push(`/storegoodattribute`);
              } else if(this.activeName2=='3'){
                this.$router.push(`/storegoodfeeding`);
              } else if(this.activeName2=='4'){
                this.$router.push(`/storegoodunit`);
              }
            },
            async changeSwitch(row) {
                const {msg} = await changeAttr({id: row.id, display: row.display,storeId:this.storeId});
                this.$baseMessage(msg, "success");
                this.fetchData();
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
        }
    }
</script>
